import React, { useEffect, useState, ReactFragment } from 'react';
import { connect } from 'umi';
import { Row, Col, Card, Radio, Input, Modal, InputNumber, Button, notification, Space } from 'antd';
const SmsSetting = (props) => {
    const { dispatch, loading, } = props;
    const [active, setActive] = useState('adminLogin')
    const [mobile, setMobile] = useState('')
    const TabList = [{
        label: '员工',
        key: 'adminLogin',
    },
    {
        label: '用户',
        key: 'adminUserLogin',
    },
    ]
    const onChange = (e) => {
        setActive(e.target.value);
    };
    function isPhoneNumber(phone) {
        return /^1[3-9]\d{9}$/.test(phone);
    }

    const submit = () => {
        if (mobile.length !== 11 || !isPhoneNumber(mobile)) {
            notification.warning({
                message: '温馨提示',
                description: `请输入正确的手机号`,
            });
        } else {
            dispatch({
                type: 'system/fakeSendSmsCodeBack',
                payload: {
                    mobile: mobile,
                    smsType: active
                },
                callback: (e) => {
                    const { smsCode } = e
                    Modal.confirm({
                        title: '获取验证码成功',
                        content: '该手机验证码为' + smsCode,
                        okText: '复制',
                        onOk() {
                            navigator.clipboard.writeText(smsCode)
                            notification.success({
                                message: '温馨提示',
                                description: '复制成功',
                            });
                        },
                        onCancel() {
                            console.log('Cancel');
                        },
                    })
                }
            })
        }
    }
    return <Card title='短信验证码'>
        <Row gutter={[0, 12]}>
            <Col span={24}>
                <Radio.Group
                    value={active}
                    onChange={onChange}
                    style={{
                        marginBottom: 16,
                    }}
                >
                    验证码类型：{TabList.map((item, index) => {
                        return <Radio.Button key={index} value={item.key}>{item.label}</Radio.Button>
                    })}
                </Radio.Group>
            </Col>
            <Col span={24}>
                <Space>
                    手机号码：<Input onChange={(e) => {
                        setMobile(e.target.value)
                    }} value={mobile}></Input>
                    <Button onClick={() => {
                        submit()
                    }} type='primary' loading={loading}>生成</Button>
                </Space>

            </Col>
        </Row>
    </Card>
}


export default connect(({ loading }) => ({
    loading: loading.effects['system/fakeSendSmsCodeBack'],
}))(SmsSetting);
